<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>${product.name} - Powered By ${siteConfig.systemName}</title>  <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon" />
    <meta name="Author" content="Meida Team"/>
    <meta name="Copyright" content="Meida"/>
    <%if (product.metaKeywords! != ""){%>
    <meta name="keywords" content="${product.metaKeywords}"/>
    <%}%>
    <%if (product.metaDescription! != ""){%>
    <meta name="description" content="${product.metaDescription}"/>
    <%}%>
    <link rel="icon" href="/template/pc1/images/wmh_favicon.ico" type="image/x-icon"/>
    <% include("include.html"){}%>
    <link href="/template/pc1/css/login.css" rel="stylesheet" type="text/css"/>
    <link href="/template/pc1/css/register.css" rel="stylesheet" type="text/css"/>
    <link href="/template/pc1/css/product.css" rel="stylesheet" type="text/css"/>
    <link href="/template/pc1/css/product_content.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="/template/pc1/js/login.js"></script>
    <script type="text/javascript" src="/template/pc1/js/register.js"></script>
    <script type="text/javascript" src="/template/pc1/js/product.js"></script>

    <!--腾讯视频播放插件-->
    <script src="//qzonestyle.gtimg.cn/open/qcloud/video/h5/h5connect.js" charset="utf-8"></script>
    <script type="text/javascript">
        $().ready(function () {

            // 添加商品浏览记录
            $.addProductHistory("<%if (strutil.length(product.name!) <= 15){%>${product.name}<%}else{%>${strutil.subStringTo(product.name,0,11)}...<%}%>", "${product.htmlFilePath}");

        })


    </script>
    <script type="text/javascript">
        /*如果开启视频播放(文章管理)*/
        <%if (isNotEmpty(product.videoFileId) && isNotEmpty(product.videoAppId)) {%>
            $(function () {
                var player = new qcVideo.Player("id_video_container", {
                    "file_id": "${product.videoFileId!}",
                    "app_id": "${product.videoAppId!}",
                    "width": 640,
                    "height": 480
                });
            });
        <%}%>
    </script>

</head>
<body class="productContent">
<div id="addCartItemTip" class="addCartItemTip" style="display: none">
    <div class="top">
        <div class="tipClose addCartItemTipClose"></div>
    </div>
    <div class="middle">
        <p>
            <span id="addCartItemTipMessageIcon">&nbsp;</span>
            <span id="addCartItemT  ipMessage"></span>
        </p>
        <p id="addCartItemTipInfo" class="red"></p>
        <input type="button" class="formButton tipClose" value="继续购物" hidefocus="true"/>
        <input type="button" class="formButton" onclick="location.href='/b/pc/cartItem/list?shopId=${shopId!}'" value="进入购物车" hidefocus="true"/>
    </div>
    <div class="bottom"></div>
</div>
<%include("header_index_sys.html"){}%>
<input type="hidden" id="shopId" name="shopId" value="${shopId!}"/>
<div class="listBar">
    <div class="left"></div>
    <div class="middle">
        <div class="path">
            <a href="/index.html" class="home"><span class="icon">&nbsp;</span>首页</a>>
                <%for(list in pathList){%>
                <a href="/b/pc/product/list?id=${list.id}&shopId=${shopId!}">${list.name}</a>>
                <%}%>
            ${product.name}
        </div>
    </div>
    <div class="right"></div>
</div>
<div class="body bodywidth">
    <div class="bodyRight">
        <div class="blank"></div>
        <div class="productTop">
            <div class="productTopLeft">

                <!--图片放大-->
                <div id="MagnifierWrap2">
                    <div class="MagnifierMain">
                        <%for(list in product.productImageList!){%>
                        <img class="MagTargetImg" src="${list.bigProductImagePath}"/>
                        <%}%>

                        <%if (product.productImageList == null){%>
                        <img class="MagTargetImg" src="${systemConfig.defaultSmallProductImagePath}"/>
                        <%}%>
                        <!--<img class="MagTargetImg" src="userimg.jpg">-->
                    </div>
                    <span class="spe_leftBtn">&lt;</span>
                    <span class="spe_rightBtn">&gt;</span>
                    <div class="spec-items">
                        <ul>

                            <%if (product.productImageList == null){%>
                            <li>
                                <img src="${systemConfig.defaultSmallProductImagePath}"/>
                            </li>
                            <%}%>
                            <%for(list in product.productImageList!){%>
                            <li>
                                <img src="${list.bigProductImagePath}"/>
                            </li>
                            <%}%>
                        </ul>
                    </div>
                </div>


            </div>


            <div class="productTopRight">
                <h1>
                    <%if (strutil.length(product.name) >
                    50){%>${strutil.subStringTo(product.name,0,45)}...<%}else{%>${product.name}<%}%>
                </h1>
                <p class="f_p"><span class="col-red">${product.secondName!}</span></p>
                <ul class="productAttribute">
                    <%var index = 1;%>
                    <%for(list in product.productType.enabledProductAttributeList!){%>
                    <%if (product.productAttributeMap != null){%>
                    <li>
                        <strong>${list.name}:</strong>
                        ${product.productAttributeMap[list.id]}&nbsp;
                    </li>
                    <%if (index == 5){%>
                    <%break;%>
                    <%}%>
                    <% index = index + 1; %>
                    <%}%>
                    <%}%>
                    <%if (product.productType.productAttributeList! != null &&
                    product.productType.productAttributeList.~size > 0){%>
                    <li style="display: none"><a href="#productAttribute" id="moreProductAttribute">更多参数>></a></li>
                    <%}%>
                </ul>
                <div class="blank"></div>
                <div class="productInfo">
                    <div class="left"></div>
                    <div class="right">
                        <div class="top">
                            销 售 价：<span class="price">${product.price,priceCurrencyFormat}</span>
                            市 场 价：<span class="marketPrice">${product.marketPrice,priceCurrencyFormat}</span>
                        </div>

                        <%if(product.productGift.~size>0){%>
                        <div class="gifbottom">
                            <div class="gift">
                                <div class="fl">正在促销
                                    <p class="products_gift">赠 品</p>
                                </div>
                                <div class="fl giftlist">
                                    <%for(list in product.productGift){%>
                                    <li>
                                        <p class="fl"><img class="small_img giftIMG" src="${list.describe}" alt=""></p>
                                        <p class="gift_name">${list.name}
                                            <br>数量 ${list.num!}</p>
                                    </li>
                                    <%}%>
                                </div>
                            </div>
                            <!--<%if (product.weight > 0){%>-->
                            <!--重 量：<span class="weight">${product.weight} </span>-->
                            <!--<%}%>-->
                            <!--<%if (product.point != 0){%>-->
                            <!--积 分：<span>${product.point}</span>-->
                            <!--<%}%>-->
                        </div>
                        <%}%>
                    </div>
                </div>
                <!--
                                <div class="blank"></div>
                                <div class="productNumber">
                                    货号: <span>${product.productSn}</span>
                                ${"品牌: <span>" + product.brand.name! + "</span>"}
                                </div>
                -->
                <div class="blank"></div>
                <div class="productBuy">
                    <!--
                                        <div class="buyCount">
                                            我要购买: <input type="text" id="quantity" value="1" /> 件
                                        </div>
                    -->
                    <!--<div class="xiaoliang clearfix">
                        <div class="fl">持续获得用户好评&lt;!&ndash;<span class="col-red"> 45 </span>&ndash;&gt;</div>
                        <div class="fl">累计评价<span>
                                <img src="/template/pc1/images/sc_hover.png" alt="">
                                <img src="/template/pc1/images/sc_hover.png" alt="">
                                <img src="/template/pc1/images/sc_hover.png" alt="">
                                <img src="/template/pc1/images/sc_hover.png" alt="">
                                <img src="/template/pc1/images/sc_hover.png" alt="">
                          </span>
                        </div>
                        <div class="fl">
                            <%if (product.point != 0){%>
                            送积分
                            <span class="col-red">
                                ${product.point}
                            </span>
                            <%}%>
                        </div>
                    </div>-->
                    <!--规格属性-->
                    <div class="sys_item_spec">
                        <input type="hidden" class="specificationtype" value="${product.specificationtype}"/>
                        <%for(list in specification!){%>
                        <dl class="clearfix iteminfo_parameter sys_item_specpara" data-sid="${list.id}">
                            <dt style="width: auto;margin-right: 5px">${list.name}</dt>
                            <dd>
                                <ul class="sys_spec_text">
                                    <%for(l in list.specificationValues){%>
                                    <li data-aid="${l.id}"
                                    <%if(strutil.contain(product.specificationvalues,l.id!)){%> class="selected"<%}%>>
                                    <a href="javascript:;" title="${l.name}">${l.name}</a>
                                    </li>
                                    <%}%>
                                </ul>

                            </dd>
                        </dl>
                        <%}%>
                        <dl class="clearfix iteminfo_parameter">
                            <dt>数量</dt>
                            <dd>
                                <div id="count" class="Spinner"></div>
                                <div class="surplus" id="showNum">库存<i><strong style="font-size:14px;">有货</strong>，可供选购
                                    <!--仅剩余14件--></i></div>
                            </dd>
                        </dl>
                    </div>
                    <%if (product.isOutOfStock){%>
                    <input type="button" class="outOfStockButton" value="" hidefocus="true"
                           style="margin-right: 10px;margin-top: 17px;"/>
                    <%}else{%>
                    <input type="button" class="addCartItemButton addCartItem {id: '${product.id}',shopId:'${shopId}'}"
                           value="立即购买" hidefocus="true"/>
                    <%}%>
                    <input type="button" class="addFavoriteButton addFavorite {id: '${product.id}'}" value="加入收藏"
                           hidefocus="true"/>
                </div>
            </div>
        </div>
        <div class="blank"></div>
        <div class="productBottom">
            <div id="mainMenuBarAnchor"></div>
            <ul id="mainMenuBar" class="productAttributeTab">
                <li>
                    <a href="javascript:void(0);" class="current" hidefocus="true">商品介绍</a>
                </li>
                <!--<li>
                    <a href="javascript:void(0);" name="productAttribute" hidefocus="true">规格参数</a>
                </li>-->
                <li>
                    <a href="javascript:void(0);" name="evaluate" hidefocus="true">用户评价</a>
                </li>
                <!--<li style="display: none">
                    <a href="javascript:void(0);" name="video" hidefocus="true">视频展示</a>
                </li>-->
            </ul>
            <div class="tabContent productDescription">
                ${product.description}
            </div>
            <div class="tabContent productAttribute">
                <table class="productAttributeTable">
                    <%for(list in product.productType.enabledProductAttributeList!){%>
                    <%if (product.productAttributeMap != null){%>
                    <tr>
                        <th>${list.name}</th>
                        <td>
                            ${product.productAttributeMap[list.id]}&nbsp;
                        </td>
                    </tr>
                    <%}%>
                    <%}%>
                </table>
            </div>
            <div class="tabContent evaluate">
                <ul class="superbox">
                    <%if(evaluateList.~size<1){%>
                    <div class="mt5"> 对不起，貌似还没有人发表评价！</div>
                    <%}else{%>
                    <% for(list in evaluateList){%>
                    <dl class="ddd-con clearfix">
                        <dt class="fl">
                            <div class="mb10">
                                <img src="/template/pc1/images/logo_head.jpg" width="80" height="80"></div>
                            ${list.member.username}
                        </dt>
                        <dd class="fr l-24">
                            <div class="col-nine"> ${list.createDate,dateFormat="yyyy-MM-dd HH:mm:ss"}</div>
                            <div class="mt5"> ${list.content}</div>
                            <%for(image in list.imageStore ){%>
                            <%if(!isEmpty(image)){%>
                            <div class="photos">
                                <div class="mt10 clearfix">
                                    <div class="p-li">
                                        <img src="${image}">
                                        <div class="p-ding1">
                                            <img src="${image}" data-img="${image}" class="superbox-img" width="60"
                                                 height="60">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <%}%>
                            <%}%>

                            <!--<div class="mt10 col-blue">
                                解释： 感谢亲亲还特意表扬咱家小客服们呢，能为亲亲带来一次愉快的购物，是我们最开心的事情呢！您之后在使用过程中遇到任何问题都可以预约微米荟专业技师上门服务哟，或者直接联系我们在线客服，我们都会第一时间为您处理。期待您的下次光临哦，祝您生活愉快，天天开心！ </div>-->
                        </dd>
                    </dl>
                    <%}%>
                    <%}%>
                </ul>
            </div>
            <div class="tabContent video">
                <%if(!isEmpty(product.videoFileId) && !isEmpty(product.videoAppId) ){%>
                <div id="id_video_container" style="width:100%; height:auto;"></div>
                <%}else{%>
                <div class="mt5"> 对不起，还没有添加任何视频。</div>
                <%}%>

            </div>
        </div>
    </div>
    <div class="blank"></div>
</div>
<div class="blank"></div>
<%include("footer.html"){}%>
<script type="text/javascript" src="/template/pc1/js/jquery.Spinner.js"></script>
<!--多-->
<script type="text/javascript">
    //商品规格选择
    $(function () {

        //数字加减
        $("#count").Spinner({value: 1, min: 1, len: 1, max: 10});
        //规格选择
        $(".sys_item_spec .sys_item_specpara").each(function () {
            var i = $(this);
            var p = i.find("ul>li");
            p.click(function () {

                if (!!$(this).hasClass("selected")) {
                    $(this).removeClass("selected");
                    i.removeAttr("data-attrval");
                } else {
                    $(this).addClass("selected").siblings("li").removeClass("selected");
                    i.attr("data-attrval", $(this).attr("data-aid"))
                }
                var selectedGg = $('.sys_spec_text').children('.selected');//选中的规格
                var specificationValueIds = '';
                $(selectedGg).each(function (index, item) {
                    specificationValueIds += $(this).attr('data-aid') + ','
                });
                $.ajax({
                    url: "/b/pc/specification/getSkuPrice",
                    data: {
                        "specificationtype": $('.specificationtype').val(),
                        "specificationValueIds": specificationValueIds
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.state === 'ok') {
                            $('.price').text('￥' + data.price)
                            $('.marketPrice').text('￥' + data.marketPrice)
                        }


                    }
                });

            })
        });
        //导航绑定
        var $window = $(window),
            $mainMenuBar = $('#mainMenuBar'),
            $mainMenuBarAnchor = $('#mainMenuBarAnchor');

        // Run this on scroll events.
        $window.scroll(function () {
            var window_top = $window.scrollTop();
            var div_top = $mainMenuBarAnchor.offset().top;
            if (window_top > div_top) {
                // Make the div sticky.
                $mainMenuBar.addClass('stick');
                $mainMenuBarAnchor.height($mainMenuBar.height());
            }
            else {
                // Unstick the div.
                $mainMenuBar.removeClass('stick');
                $mainMenuBarAnchor.height(0);
            }
        });

    })
</script>

</body>
</html>